<template>
	<div>
		<panle title='严禁词组' content="严禁词组"></panle>
		<!--标签-->
		<div>
			<div class="first_content">
				<!--筛选条件-->
				<div class="shaixuan">
					<div style="display: flex;">
						<el-input placeholder="搜索关键词" ref="searchinput" v-model="searchinputgroup"
							class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="searchgroup"></el-button>
						</el-input>
						<el-button style="margin-left: 20px;" size="mini"  @click="resetForm('searchinput')">重置</el-button>
						<el-button size="mini" @click="searchgroup" >刷新</el-button>
					</div>
					<el-button class="addshuziren_btn" type="danger" size="mini" round
						@click="createdYanjincigroup" v-show="hasPermission('live:yanjincigroup:add')">+创建严禁词组</el-button>
				</div>
				<div class="first_table">
					<el-row>
						<el-col :span="24">
							<div class="yixuan">已选 {{ multipleSelectioncountgroup }} <el-button
									@click="piliangshanchugroup" type="text" v-show="hasPermission('live:yanjincigroup:batch_del')">批量删除</el-button></div>
						</el-col>
					</el-row>
					<el-table :data="tableDatagroup" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe
						default-expand-all v-loading="loadinggroup" @selection-change="handleSelectionChangegroup">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column prop="id" label="ID" width="55"></el-table-column>
						<el-table-column prop="name" label="严禁词组"></el-table-column>
						<el-table-column prop="createtime" label="创建时间"></el-table-column>
						<el-table-column prop="id" label="操作" v-if="isShow(['live:yanjincigroup:edit','live:yanjincigroup:info','live:yanjincigroup:del'])">
							<template slot-scope="scope">
								<PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil"
									perms="live:yanjincigroup:edit" @click="editgroup(scope.row)"></PersButton>
								<PersButton type="text" size="mini" icon="fa fa-building-o" perms="live:yanjincigroup:info"
									label="详情" @click="chakangroup(scope.row)"></PersButton>
								<PersButton type="text" size="mini" icon="el-icon-delete" perms="live:yanjincigroup:del"
									label="删除" @click="delgroup(scope.row)"></PersButton>
							</template>
						</el-table-column>
					</el-table>
					<div class="block">
						<el-pagination @size-change="handleSizeChangegroup" @current-change="handleCurrentChangegroup"
							:current-page="pageNumbergroup" :page-sizes="[10, 50, 100, 200]" :page-size="pageSizegroup"
							background layout="total, sizes, prev, pager, next, jumper" :total="totalgroup">
						</el-pagination>
					</div>
				</div>
				<!--弹出层  添加数字人-->
				<el-dialog v-dialogDrag :visible.sync="opengroup" width="600px" append-to-body
					:title="!formgroup.id ? '创建严禁词组' : '编辑严禁词组'">
					<el-form ref="form" :model="formgroup" :rules="rulesgroup" label-width="80px">
						<el-row>
							<el-col :span="24">
								<el-form-item label="严禁词组" prop="name">
									<el-input style="width:50%" v-model="formgroup.name" placeholder="请输入严禁词组名称"
										size="small" />
								</el-form-item>
							</el-col>

						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="opengroup = false" size="small">取 消</el-button>
						<el-button type="primary"
							@click="!formgroup.id ? submitFormgroup('form') : subEditFormgroup('form')" size="small">确
							定</el-button>
					</div>

				</el-dialog>
			</div>

		</div>
	</div>
</template>

<script>

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import { getYanjinciDatagroup, createYanjincigroup, delYanjincigroup, editYanjincigroup, pldelYanjincigroup } from '@/api/live/yanjincigroup';

import { hasPermission,isShow } from '@/common/permission'
export default {
	components: {
		Panle,
		PersButton
	},
	data() {
		return {
			loadinggroup: false,
			tableDatagroup: [],
			multipleSelectioncountgroup: 0,
			multipleSelectiongroup: [],
			pageSizegroup: 10, //一页显示多少条
			pageNumbergroup: 1,
			totalgroup: 0, //总页数
			searchinputgroup: '',
			fileList2: [],
			flagid2: '',
			filelist: [],
			dialogVisible: false,
			disabled: false,
			activeName: 'first',
			open2: false,

			opengroup: false,
			formgroup: {
				"id": '',
				"name": "",
				"remark": '',
			},
			rulesgroup: {

				name: [{
					required: true,
					message: "类型不能为空",
					trigger: "blur"
				}],
				remark: [{
					required: true,
					message: "评论不能为空",
					trigger: "blur"
				}],
			},

			clickType: false,
			imgnum: 1, //选择图片数量
		}
	},
	created() {
		this.init2();
	},
	methods: {
		hasPermission,
		isShow,
		resetForm(formName) {
			this.searchinputgroup = '';
			this.init2();
		},
		handleClick(tab, event) {
			console.log(tab, event);
		},
		init2: function () {
			this.loadinggroup = true;
			let _param = {
				"size": this.pageSizegroup,
				"page": this.pageNumbergroup,
				"input": this.searchinputgroup,
			}
			getYanjinciDatagroup(_param).then((res) => {
				console.log(res);
				this.tableDatagroup = res.data.list;
				this.totalgroup = res.data.total;
				this.loadinggroup = false;
			})
		},
		searchgroup: function () {
			this.searchinputgroup = this.searchinputgroup;
			this.init2();
		},
		handleSizeChangegroup: function (e) {
			console.log(e);
			this.pageSizegroup = e;
			this.init2();
		},
		handleCurrentChangegroup: function (e) {
			console.log(e);
			this.pageNumbergroup = e;
			this.init2();
		},
		//已选
		handleSelectionChangegroup: function (e) {
			console.log(e);
			let selectChang = []
			for (let item of e) {
				selectChang.push(item.id)

			}
			this.multipleSelectiongroup = selectChang;
			this.multipleSelectioncountgroup = selectChang.length;
			console.log(selectChang);
		},
		//创建表单
		createdYanjincigroup: function (e) {
			this.formgroup = {
				"id": '',
				"name": '',
				"remark": "",
			},
				this.opengroup = true;
		},
		//提交表单  创建 
		submitFormgroup: function (e) {
			console.log(this.formgroup);
			createYanjincigroup(this.formgroup).then((res) => {
				console.log(res)
				if (res.code == 200) {
					this.msgSuccess(res.msg);
					this.init2();
					this.opengroup = false;
				} else {
					this.msgError(res.msg);
				}
			})


		},
		subEditFormgroup: function (e) {
			console.log(e);
			editYanjincigroup(this.formgroup).then((res) => {
				console.log(res)
				if (res.code == 200) {
					this.msgSuccess(res.msg);
					this.init2();
					this.opengroup = false;
				} else {
					this.msgError(res.msg);
				}
			})
		},

		delgroup: function (data) {
			this.$confirm('确定删除【' + data.name + '】严禁词组吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let _param = {
					'id': data.id
				}
				delYanjincigroup(_param).then((res) => {
					if (res.code == 200) {
						this.msgSuccess(res.msg);
						this.init2();
					} else {
						this.msgError(res.msg);
					}
				})


			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		editgroup: function (data) {

			this.formgroup.id = data.id;
			let editForm = {
				"id": data.id,
				"name": data.name,
				"remark": data.remark,

			}
			Object.assign(this.formgroup, editForm);
			this.opengroup = true;
		},
		//批量删除
		piliangshanchugroup: function (e) {
			this.$confirm('确定批量删除选中严禁词组吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let _param = {
					'ids': this.multipleSelectiongroup
				}
				pldelYanjincigroup(_param).then((res) => {
					if (res.code == 200) {
						this.msgSuccess(res.msg);
						this.init2();
					} else {
						this.msgError(res.msg);
					}
				})


			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		chakangroup: function (e) {
			this.$router.push({ path: '/live/yanjinci', query: { groupid: e.id } });
		},

	}
}

</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.el-select .el-input {
	width: 130px;
}

.input-with-select .el-input-group__prepend {
	background-color: #fff;
}

.shaixuan {
	display: flex;
	flex-flow: nowrap;
	align-content: center;
	margin-top: 15px;
}

.first_content {
	display: flex;
	flex-flow: nowrap;
	flex-direction: column;
	align-content: center;
}

.uploadcol {
	display: flex;
	flex-flow: column;
	width: 100px;
}

.uploadborder {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	/* cursor: pointer;
      position: relative;
      overflow: hidden; */
	width: 100px;
	height: 100px;
}

.addshuziren_btn {
	position: absolute;
	right: 0;
	margin-right: 20px;
}

.daorushuziren_btn {
	position: absolute;
	right: 0;
	margin-right: 160px;
}

.yixuan {
	margin: 20px;
	color: #787878;
}
</style>